<template>
    <div class="u-chartsBox">
        <div class="legend" :class="[type,position]">
            <span v-for="(item,index) in legend" :key="index">
                <i :style="'background:'+ item.color +';'"></i>{{item.name}}
            </span>
        </div>
        <div class="chartsM" :id="'chartsBox_bar'+keyId"></div>
    </div>
</template>
<script>
export default {
    name:'UDatasetEchart',
    props:{
        keyId:{},               //唯一echart
        type:{                  //标签的图标类型 pie圆点   
            type: String,
            default: "pie"
        },
        position:{              //标签的位置  默认右上
            type: String,
            default: "right"
        },
        legend: Array,
        list: Array,
        yAxisName:{},
        markVal:{},
        markLine: Boolean
    },
    data(){
        return{
            chartsObj: null,
            option:{},
        }
    },
    mounted(){
        this.initChart()
    },
    methods:{
        initChart(){
            this.chartsObj = this.$echarts.init(document.getElementById('chartsBox_bar'+this.keyId));
            let len = this.list[0].value.length
            let dataAxis = []                   //横坐标
            let dataShadow = [];                //背景阴影
            let markObjColor=""; 
            let pieces = []
            let visualMap = []

            let seriesItem = {
                type: 'bar',
                itemStyle: {
                    barBorderRadius: [5, 5, 0, 0]
                },
                showBackground: true,
                backgroundStyle:{
                    color:'rgba(0,0,0,0.05)',
                    barBorderRadius: [5, 5, 0, 0]
                },
            }
            let series = []
            let first = ['product']
            for(let i=0; i<len; i++){
                first.push('score'+i)
                let itemStyle = {...seriesItem.itemStyle}
                itemStyle.color =  new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: this.legend[i].itemcolor[0]},
                        {offset: 1, color: this.legend[i].itemcolor[1]}
                    ]
                )
                
                series.push({...seriesItem,...itemStyle})
            }


            let dataInfo = [first] ;

            this.list.forEach((item, index) => {
                dataInfo.push([item.name,...item.value])
            }); 
            if( len== 1){
                this.legend.forEach((item,index) => {
                    let {min,max,itemcolor} = item
                    pieces.push({
                        min,max,color: new this.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: itemcolor[0]},
                                {offset: 1, color: itemcolor[1]}
                            ]
                        )
                    })
                }) 
                
                visualMap.push({
                    type:'piecewise',
                    show:false,
                    pieces:pieces,
                })
            } 

            // if(this.markVal)  markObjColor = this.legend.filter(item =>{ return this.markVal<=item.max&&this.markVal>item.min})[0].color 

            this.option = {
                dataset: {
                    source: dataInfo
                },
                visualMap:visualMap,
                tooltip:{
                    formatter: (params)=>{
                        let ind = params.encode.y[0]
                        let value = params.value
                        return value[0]+'<br><span class="tooltip_span">'+value[ind]+'</span>分'
                    },
                    backgroundColor: "#ff7b12",
                    padding: 16,
                    textStyle:{
                        lineHeight: 30
                    }
                },
                xAxis:{
                    type: 'category',
                    axisLabel: {
                        rotate:'45',
                        // formatter: (value,index) =>{
                        //     if(this.markVal&&this.list[index].value<=this.markVal) return '{detail|'+value+'}'
                        //     return value
                        // }, 
                        // rich: {
                        //     detail: {
                        //         color: markObjColor,
                        //     },
                        // } 
                        color:function(params,index){
                            // console.log(params,index)
                            // return colors[params.dataIndex]; 
                            // 取每条数据的 index 对应 colors 中的 index 返回这个颜色
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10 , 
                },
                yAxis: {
                    name: this.yAxisName,
                    nameGap: 30,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle:{
                            color:"#f4f5f9"
                        },
                    },
                },
                series: series
            };


            if(this.markLine) {
                this.option.series[0].markLine = {
                    silent: true,
                    data: [
                        {
                            yAxis: this.markVal,
                            name: '对比数',
                        }
                    ],
                    symbol:"none",
                    label:{
                        show: false
                    },
                    lineStyle:{
                        color: "rgba(219,222,229,0.8)",
                        width: 2,
                    },
                }
            }
            // 使用刚指定的配置项和数据显示图表。
            this.chartsObj.setOption(this.option);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
        setChart(chartData){
            chartData = chartData || this.option
            this.chartsObj.hideLoading()
            this.chartsObj.setOption(chartData);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
    }
}
</script>